<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../JS_lib/lib/jquery.min.js"></script>
</head>
<body>
<ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
    <li><button>按钮3</button></li>
    <li><button>按钮4</button></li>
</ul>
<p>这是一个段落</p>
<p class="aside">这是另一个段落</p>
<script type="text/javascript">
   /*这是用js原生代码写的*/
  window.onload=function(){
      var lis=document.getElementsByTagName('li');
      var ps=document.querySelectorAll('p')
      for(var j=0;j<ps.length;j++){
          ps[j].style.backgroundColor='red';
      }
//      实现点击每个按钮，出现的是对应的index值
      for(let i=0;i<lis.length;i++){
//          套一个自执行函数
          (function(i){
//              var j=i;
              lis[i].onclick=function(){
                  alert("你点击了第"+i+"个li！")
              }
          }(i));
//          或者
          !function(i){
//              var j=i;
              lis[i].onclick=function(){
                  alert("你点击了第"+i+"个li！")
              }
          }(i);
//          将var 改为let就可以代替函数闭包
//          lis[i].onclick=function(){
//              alert("你点击了第"+i+"个li！")
//          };
//              自执行函数
//              我们在点击函数外面嵌套了一层自执行函数！ 这种函数套函数的形式，就形成了闭包！
      }
  }
//  用jquery来写
//    $(document).ready(function(){
//        $('li').click(function(){
//            $('p').toggle();
//        });
//    });
//   $(document).ready(function(){
//       $('li').click(function(){
//           alert($(this).index());
//       });
//   });
   $(document).ready(function(){
       $('li').click(function(){
          window.close();
       });
   });
//  在javascript中只有全局作用域和函数作用域，并不存在块级作用域。这样，在使用时就会出现一些问题
</script>
</body>
</html>
<!--如果不在外面套一层闭包函数-->
<!-- 页面加载的时候，JS代码会全部执行，也就是上面的for循环在页面加载完就已经执行完了！那，这个i就已经变成了lis.length。 也就是说，你在点击li的时候，无论点击第几个，弹出的都是lis.length-->